
    <h2>Person overview</h2>

    <table class="scrollTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Last name</th>
                <th>Partner</th>
                <th>Function</th>
                <th>Phone</th>
                <th>Emailaddress</th>
            </tr>
        </thead>
        <tbody>
           <tr>
                <td>Loading...</td><td>Loading...</td><td>Loading...</td><td>Loading...</td><td>Loading...</td><td>Loading...</td>
            </tr>
        </tbody>
    </table>
 <script type="text/javascript">
        $('.scrollTable').dataTable({ "sAjaxSource": base_url+"index.php/portal/getPersons", "sPaginationType": "full_numbers", "bRetrieve": true });
    </script>
    <input type="button" class="button addButton" name="addPerson" value="Add" id="showAddPersonForm" onclick="showForm()"/>
    
    <div id="addPersonForm" class="addPersonForm">
        <form style="display: none;">
        <div class="personRoll">
            <label>Select a roll:</label><br/>
            <div class="personRollapp">
                <input type="radio" name="role_id" id="personRoll" value="1"/><label>Admin</label> <br/>
                <input type="radio" name="role_id" id="personRoll" value="2"/><label>Author</label> <br/>
            </div>
            <div class="personRollapp">
                <input type="radio" name="role_id" id="personRoll" value="3"/><label>Internal Contact</label><br/>
                <input type="radio" name="role_id" id="personRoll" value="4"/><label>Internal Contact & Author</label><br/>
            </div>
        </div>
        <div class="personField">
            <label>Name:</label>
            <input type="text" id="personName" name="name"/>
            <label>Last name:</label>
            <input type="text" id="personLastName" name="last_name"/>
            <label>Phone:</label>
            <input type="text" id="personPhone"name="phone_number"/>
        </div>

        <div class="personField">
            <label>Email:</label>
            <input type="text" id="personEmail" name="email_address">
            <label>Function:</label>
            <input type="text" id="personFunction" name="job_description">
            <label>Partner:</label>
            <select id="personAddPartner" name="partner_id">
                <option value="">-- Select one --</option>
                <?
                foreach($partners as $p) {
                    echo '<option value="'.$p->id.'">'.$p->name.'</option>';
                }
                ?>
            </select>
        </div>

        <div class="personField">
            <label>Upload picture:</label>
            <input type="text" id="personFile" name="picture"/>
            <label>Leading contact:</label>
            <input type="checkbox" id="personLeading" name="leading" value="leadingContact"/>
            <label style="margin-top:15px;">Password:</label>
            <input type="password" id="personPassword" name="password"/>
        </div>

        <div class="personGroup">
            <fieldset>
                <legend>Address:</legend>
                <label>Address:</label>
                <input type="text" id="personAddress" name="address"/>
                <label>Postal code:</label>
                <input type="text" id="personPostalCode" name="postalcode"/>
                <label>City:</label>
                <input type="text" id="personCity" name="city"/>
                <label>Extra:</label>
                <input type="text" id="personExtra" name="extra" value="e.g. building, room etc."/>
            </fieldset>
        </div>
        <div class="personGroup">

            <fieldset>
                <legend>Social Media:</legend>
                <label>Facebook:</label>
                <input type="text" id="personFacebook" name="facebook"/>
                <label>Twitter:</label>
                <input type="text" id="personTwitter" name="twitter"/>
                <label>Linkedin:</label>
                <input type="text" id="personLinkedin" name="linkedin"/>
                <label>Other:</label>
                <input type="text" id="personOther" name="other"/>
            </fieldset>
        </div>
        
        <div class="formButton">
            <input type="button" id="cancelAddPerson" class="button" name="hideAddPersonForm" value="Cancel" onclick="hideForm()"/>
            <input type="submit" id="addPerson" class="button" name="addPerson" value="Save"/>
             <script type="text/javascript">
                $('#addPerson').click(addPerson());
            </script>
        </div>
            </form>